<!--
 * @Author: coocase
 * @Date: 2021-05-02 18:35:13
 * @LastEditTime: 2021-06-21 17:59:36
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\detail\detailIntro.vue
-->
<template>
  <div class="detail-intro">
    <Row>
      <Col span="18">
        <div class="detail-gallery">
          <Row>
            <Col span="8">
              <!-- <img
                class="item-img"
                :style="{ 'background-color': datas.imgUrl }"
              /> -->
              <img class="item-img" :src="datas.imgUrl" alt="" />
            </Col>
            <Col span="16">
              <div class="item-title">{{ datas.itemName }}</div>

              <div class="item-state">
                <Steps :current="datas.state - 1">
                  <Step title="项目待定"></Step>
                  <Step title="预售/预订"></Step>
                  <Step title="售票中"></Step>
                  <Step title="已结束"></Step>
                </Steps>
              </div>
              <div class="item-adress">
                演出地点：北京卢米埃影城长楹天街IMAX店 XXXX剧院
              </div>
              <div class="item-date">
                演出时间 :{{ upTime }}
                <!-- v-model绑定默认选择 -->
                <RadioGroup
                  type="button"
                  v-for="time in datas.startTime"
                  :key="time.time"
                  @on-change="radioChange"
                  class="radio"
                  v-model="timeSelect"
                >
                  <!-- 通过绑定label为id来识别radio的唯一性 -->
                  <Radio :label="time.id" class="radio-item">{{
                    time.time
                  }}</Radio>
                </RadioGroup>
              </div>
              <div class="item-price">
                选择票价：
                <RadioGroup
                  type="button"
                  v-for="price in itemPrice"
                  :key="price.price"
                  @on-change="radioChange"
                  class="radio"
                  v-model="priceSelect"
                >
                  <!-- 通过绑定label为id来识别radio的唯一性 -->
                  <Radio :label="price.id" class="radio-item"
                    >￥{{ price }}
                  </Radio>
                </RadioGroup>
              </div>
              <Button class="item-buy" type="primary" @click="getBuyInfo"
                >购买</Button
              >
            </Col>
          </Row>
        </div>
      </Col>
      <Col span="1"></Col>
      <Col span="5">
        <div class="note">
          <p class="note-title">
            <Icon type="ios-checkmark-circle-outline" color="red" />不支持退
          </p>
          <p class="note-info">
            票品为有价证券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
          </p>
          <p class="note-title">
            <Icon type="ios-checkmark-circle-outline" color="red" />可选座
          </p>
          <p class="note-info">
            本项目支持自主选座<br />
            1. 选择演出时间，并点击“选座购票”进入选座页面<br />
            2. 选座后，在倒计时内支付成功，选座生效
            （先付后选的项目需要先付款，到开放选座的日期我们会短信通知，请注意查收）
          </p>
          <p class="note-title">
            <Icon type="ios-checkmark-circle-outline" color="red" />
            电子票
          </p>
          <p class="note-info">
            电子票：通过票夹中的二维码或身份证，可以直接验票入场（具体以下单后票夹信息为准）
          </p>
          <p class="note-title">
            <Icon type="ios-checkmark-circle-outline" color="red" />纸质发票
          </p>
          <p class="note-info">
            该项目支持开具纸质发票，请您在演出开始前通过订单页补开，发票将在演出结束后1个月左右，统一由主办方提供
          </p>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "detailIntro",
  props: ["datas"],
  data: function () {
    return {
      score: this.datas.avgScore / 2,
      timeSelect: 1,
      priceSelect: 1,
      isDisabled: true,
      upTime:
        new Date().toLocaleDateString() +
        "  " +
        new Date().toLocaleTimeString(),
      //   datas: JSON.parse(localStorage.getItem("itemInfo")),
      itemPrice: ["39.9", "44", "69"],
    };
  },
  mounted: function () {
    // console.log(this.datas);
    // console.log("intro");
    this.judgeDisabled();
    // console.log(JSON.parse(localStorage.getItem("itemInfo")), "234324");
  },
  methods: {
    radioChange: function (e) {},
    judgeDisabled: function () {
      // console.log(this.datas.state);
      if (this.datas.state == 2 && this.datas.state == 3) {
        return true;
      } else {
        return true;
      }
    },
    getBuyInfo: function () {
      if (this.GLOBAL.hasLogin) {
        this.$emit("getBuyInfo", 1);

        this.$router.push({ name: "Pay" });
      } else {
        this.$Notice.error({
          title: "请登录",
          duration: 3,
        });
      }
    },
  },
};
</script>

<style scoped>
.item-img {
  height: 360px;
  width: 270px;
  /* background-color: rgb(130, 145, 116); */
}
.item-title {
  font-size: 22px;
  color: #000;
}
.item-basicDesc {
  position: relative;
  font-size: 16px;
  color: #4a4a4a;
  margin: 21px 0px;
  zoom: 1;
}
.item-state {
  margin: 40px 0px;
}
.radio-item {
  margin-left: 10px;
}
.item-date,
.item-adress,
.item-price {
  position: relative;
  font-size: 16px;
  color: #4a4a4a;
  margin-top: 21px;
  zoom: 1;
}

.item-buy {
  margin-top: 40px;
  margin-left: 50px;
  width: 210px;
  height: 40px;
  line-height: 40px;
  /* background-color: #ff3c1b ; */
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
}

.note-title {
  font-size: 14px;
}
.note-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}
</style>